<template>
  <div class="analysis">
    <h1>This is an Dashboard Analysis page</h1>
    <Chart :options="chartOptions" />
  </div>
</template>
<script>
import Chart from "../../components/Chart";
// import Random from "lodash/random";
// import axios from "axios";
export default {
  data() {
    return {
      chartOptions: {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
    };
  },
  mounted() {
    this.getChartData();
    this.interval = setInterval(() => {
      // this.chartOptions.series[0].data = this.chartOptions.series[0].data.map(() => Random(100));
      // this.chartOptions = { ...this.chartOptions };
      this.getChartData();
    }, 3000);
  },
  methods: {
    getChartData() {
      this.$request({
        url: "/api/dashboard/chart",
        method: "GET",
        params: { ID: 123456 },
      }).then((response) => {
        this.chartOptions = {
          title: {
            text: "ECharts 入门示例",
          },
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: response.data,
            },
          ],
        };
      });
    },
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  components: {
    Chart,
  },
};
</script>
